<template>
	<view class="content">
		<!-- 顶部轮播图 -->
		<view class="page-section-spacing">
			<swiper class="swiper" 
				:indicator-dots="false" 
				autoplay="true"
				interval="5000"
				duration="1500"
				circular="true"
			>
				<swiper-item v-for="(item , index) in homeSlide" :key="index">
					<image style="width: 100%;" :src="item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- tabs选项卡内容 -->
		<view><Tab class="tabList" :tabList="tabList" @tabSelect="tabSelect" :tabActiveIdx="tabActiveIdx" /></view>
		<view class="tab-contaienr">
			<!-- 制度文件 -->
			<view v-if="tabActiveIdx === 0" style="padding: 20upx 0;">
				<view class="tabs" >
					<view class="file-list" v-if="files.length>0" >
						<view @click="showDoc" class="file-item" v-for="(item,index) in files" :key="index">{{item.name}}</view>
					</view>
					<view v-else class="no-data">--------暂无数据--------</view>
				</view>
			</view>
			<view v-if="tabActiveIdx === 1" style="padding: 20upx 0;">
				<view class="tabs">
					<uni-collapse v-if="files.length>0">
						<uni-collapse-item show-animation title="新员工入职">
							<uni-list>
							            <uni-list-item @click="previewInfo" v-for="(item,index) in files" :key="index" :title="item.name"></uni-list-item>
							        </uni-list>
						</uni-collapse-item>
					</uni-collapse>
					<view v-else class="no-data">--------暂无数据--------</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import Tab from '@/components/xyz-tab/xyz-tab.vue';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			Tab,
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() { 
			return {
				//轮播图
				homeSlide: [
					{
						img:'../../static/img/sys.png'
					}
				],
				// tabs选项卡
				tabActiveIdx: 0,
				tabList: [
					{
						id: 0,
						label: '制度文件'
					},
					{
						id: 1,
						label: '常见问题'
					}
				],
				files:[],
				// 制度文件列表
				files1:[
					{
						name:'员工手册',
						url:'xx.txt'
					},{
						name:'薪酬管理办法2018',
						url:'xx.txt'
					},{
						name:'薪酬管理办法2018',
						url:'xx.txt'
					},{
						name:'薪酬管理办法2018',
						url:'xx.txt'
					},
				],
				files2:[
						{
							name: '如何添加自定义指标？'
						},{
							name: '流程如何自动提交？'
						},{
							name: '考核关系如何调整？'
						},
					]
			}
		},
		onLoad() {},
		created() {
			this.files=this.files1
		},
		watch:{
			tabActiveIdx(idx){
				idx == 0?this.files=this.files1:this.files=this.files2
			}
		},
		methods: {
			tabSelect(idx) {
				this.tabActiveIdx = idx;
			},
			selectChange(val) {
				this.value = val;
			},
			// 预览详情
			previewInfo(){
				uni.navigateTo({
					url: './info?id=12'
				})
			},
			// 查看
			showDoc(){
				uni.navigateTo({
					url: './docDetails?id=doc'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.content{
		position: absolute;
		left: 0;
		right: 0;
		background-color: #F8F9FB !important;
	}
	// 覆盖tabs插件样式
	.tabList uni-view{
		padding: 0 !important;
		height: 60rpx;
		line-height: inherit;
		margin: 0 50rpx;
	}	
	.file-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 80rpx;
		flex-wrap: wrap;
		.file-item{
			width: 172rpx;
			height: 320rpx;
			background-color: #fff;
			border-radius: 4px;
			display: flex;
			margin-bottom: 64rpx;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			color: #101010;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 2;
			text-align: center;
			border: 1px solid rgba(255, 255, 255, 0);
			box-shadow: 0px 4px 10px 4px rgba(234, 234, 234, 0.4);
		}	
	}
</style>
